<template><!-- 互动组件（收藏、点赞、分享...） -->
  <div class="interactive">
    <div>
      <div class="goods" v-if="goodsList.length > 1" @click="handlePopupsShow" />
    </div>
    <div class="buts">
      <div class="item-wrap" @click="columnClick" v-if="columnData.length > 0">
        <div class="icon-item specialColumn-icon" />
        <div class="text-item specialColumn-text">专栏</div>
      </div>
      <div :class="['item-wrap', {'active': isCollect }]" @click="collectClick">
        <div class="icon-item collect-icon" ref="collecticon" />
        <div class="text-item collect-text">{{isCollect ? '已收藏' : '收藏'}}</div>
      </div>
      <div :class="['item-wrap', {'active': isLike }]" @click="likeClick">
        <div class="icon-item like-icon" ref="likeicon" />
        <div class="text-item like-text">{{disposeLikeNum(likeCount)}}</div>
      </div>
    </div>
    <!-- 专栏弹出层 -->
    <van-popup v-model="columnShow" :close-on-click-overlay="popupObj.isPopupGlobalMask" :round="popupObj.round"
      :position="popupObj.position" overlay-class="popClass" :overlay='popupObj.isOverlay'
      :style="{width:popupObj.width, height:popupObj.height }" @click-overlay="clickVanOverlay">
      <SpecialColumn :columnData="columnData" />
    </van-popup>
  </div>
</template>

<script>
  import SpecialColumn from './specialColumn.vue'; // 专栏组件
  import fun from "@/util/function";

  export default {
    props: {
      handlePopupsShow: Function, // 打开商品橱窗
      goodsList: Array, // 更多商品 
      videoId: String,
      isLike: Boolean, // 是否点赞
      isCollect: Boolean, // 是否收藏
      likeCount: Number, // 点赞数量
      columnData: Array, // 所属专栏
    },
    components: {
      SpecialColumn, // 专栏组件
    },
    data() {
      return {
        columnShow: false, // 专栏弹出层
        popupObj: {
          'position': 'bottom',
          'width': '',
          'height': '',
          'isOverlay': true,
          'round': true,//圆角
          'isPopupGlobalMask': true,//蒙层是否点击消失
        },
      }
    },
    created() {},
    mounted() {},
    methods: {
      // 点赞数大于10000处理
      disposeLikeNum(e) {
        return +e >= 10000 ? (e / 10000).toFixed(1) + 'W' : e + '';
      },

      /**
       * 给元素添加动画
       * @param {Node} 需要添加的dom节点
       * @param {String} 添加的动画类名
      */
      addAnimate(dom, className) {
        dom.addEventListener('animationend', () => {
          dom.classList.remove(className)
        });
        dom.classList.add(className);
      },

      // 点击专栏
      columnClick() {
        this.$emit('formChildMsg', {
          type:'columnClick'
        })
        if (this.columnData?.length === 1) {
          const params = {
            path: '/zxjt/publicSelection',
            query: {
              laneId: this.columnData[0].laneId,
              tabId: item.columnData[0].tabId,
              dzhPage: 'true'
            }
          }
          this.$router.push(params);
          return;
        }
        this.columnShow = true;
      },

      // 点击收藏
      collectClick() {
        if (this.isCollect) {
          this.$emit('formChildMsg', {
            type: 'cancelCollect',
            callback: () => this.addAnimate(this.$refs.collecticon, 'collect-animate'),
          })
        } else {
          this.$emit('formChildMsg', {
            type: 'collect',
            callback: () => this.addAnimate(this.$refs.collecticon, 'collect-animate'),
          })
        }
      },

      // 点赞
      likeClick() {
        if (this.isLike) {
          this.$emit('formChildMsg', {
            type: 'cancelLike',
            callback: () => this.addAnimate(this.$refs.likeicon, 'like-animate'),
          })
        } else {
          this.$emit('formChildMsg', {
            type: 'like',
            callback: () => this.addAnimate(this.$refs.likeicon, 'like-animate'),
          })
        }
      },
    },
  }
</script>

<style scoped lang="less">
  .interactive {
    width: 100%;
    height: 94px;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .goods {
      width: 206px;
      height: 62px;
      background: url('../../../../../assets/images/pureVideo/goodsMore.png') no-repeat;
      background-size: 100%;
    }

    .buts {
      display: flex;
      align-items: center;

      .item-wrap:nth-child(n + 2) {
        margin-left: 10px;
      }

      .item-wrap {
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .icon-item {
          width: 45px;
          height: 44px;
          background-size: 100%;
          background-repeat: no-repeat;
        }

        .text-item {
          width: 80px;
          text-align: center;
          font-size: 22px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          transition: color .3 ease;
        }

        .specialColumn-icon {
          background-image: url('../../../../../assets/images/pureVideo/specialColumn.png');
        }

        .collect-icon {
          background-image: url('../../../../../assets/images/pureVideo/collect.png');
        }

        .like-icon {
          background-image: url('../../../../../assets/images/pureVideo/like.png');
        }
      }



      /* 选中样式 */
      .item-wrap.active {
        .collect-icon {
          background-image: url('../../../../../assets/images/pureVideo/hasCollect.png');
        }

        .like-icon {
          background-image: url('../../../../../assets/images/pureVideo/hasLike.png');
        }

        .collect-text {
          font-size: 22px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          color: #FFBC00;
        }

        .like-text {
          font-size: 22px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          color: #FE5B00;
        }
      }



      /* 动画 */
      .like-animate {
        animation: like-animate .5s
      }

      .collect-animate {
        animation: like-animate .5s
      }

      @keyframes like-animate {
        0% {
          transform: scale(1);
        }

        25% {
          transform: scale(0.8);
        }

        50% {
          transform: scale(1.1);
        }

        75% {
          transform: scale(0.9);
        }

        100% {
          transform: scale(1);
        }
      }

      @keyframes collect-animate {
        0% {
          transform: scale(1);
        }

        25% {
          transform: scale(0.8);
        }

        50% {
          transform: scale(1.1);
        }

        75% {
          transform: scale(0.9);
        }

        100% {
          transform: scale(1);
        }
      }


    }
  }
</style>